<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置 style 属性的多个样式的组合（数组）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .mydiv {
            width: 200px;
            height: 100px;
            background-color: black;
        }

        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }

        .blue {
            background-color: blue;
        }

        .mywidth {
            width: 450px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 设置 style 属性的多个样式的组合（数组） -->
    <div class="mydiv" :style="[mystyle,{width:mywidth2+'px'}]"></div>
    <button type="button" @click="temp=!temp">点我</button>
    颜色：<input type="text" v-model="mycolor">
    宽度：<input type="text" v-model="mywidth2">
</div>

<script type="text/javascript">
    // Vue的实例
    new Vue({
        el: "#app",    // 接管哪一个元素，和该元素绑定
        data: {        // 数据
            temp: false,
            mycolor: 'blue',
            mw: 'mywidth',
            mycolor2: 'green',
            mywidth2: 300
        },
        computed: {
            myClassesDiv: function () {
                return {
                    red: this.temp,
                    mywidth: this.temp
                }
            },
            mystyle: function () {
                return {
                    background: this.mycolor
                }
            }
        }
    })
</script>
</body>
